<div>
  <ng-container *ngIf="canVisit">
    <p style="color:red;">温馨提示: </p>
    <p style="color:red;">1.添加二、三级分类时,请先点击上一级分类 ~</p>
    <p style="color:red;">2.排序需要在0到99之间 ~</p>
  </ng-container>
  <div class="col-md-4 position-r">
    <div class="group-title" *ngIf="canVisit">
      <div>
        <span>一级分类：</span>
        <input type="text" class="form-control" [(ngModel)]="addFirName">
      </div>
      <div style="margin-top:10px;overflow: hidden;">
        <span>分类排序：</span>
        <input type="text" class="form-control" [(ngModel)]="addFirSort">
      </div>
      <div style="margin-top:10px;overflow: hidden;">
        <span>分类显示：</span>
        <select class="form-control" [(ngModel)]="addFirStatus">
          <option value="1">显示</option>
          <option value="0">不显示</option>
        </select>
      </div>
      <div style="margin-top:20px;overflow: hidden;">
        <span style="float:left;">分类图片：</span>
        <app-upload style="float:left;margin-left:5px;" [(fileList)]="fileList" [(piclist)]="picList" [outWidth]="100"
                    [outHeight]="100"
                    (piclistChange)="fileChange()" (fileListChange)="fileChange()"></app-upload>
      </div>
      <button class="btn btn-default admin-style" nz-button (click)="addCategory($event,1)" [nzLoading]="firAddStatus">
        {{ firAddStatus ? '添加分类中' : '添加分类' }}
      </button>
    </div>
    <div class="group-item">
      <nz-spin class="admin-style" [nzTip]="'正在读取一级分类...'" style="height:100%;" [nzSpinning]="firstLoading">
        <ul class="list-unstyled">
          <li style="display:flex;align-items:center;position:relative;" *ngFor="let item of firLevel"
              [ngClass]="{'active': firId === item.id}"
              (click)="chosedCategory(1,item.id)">
            <span style="width:70px;display: inline-block;">{{item.category_name}}</span>
            <span style="width:30px;display: inline-block;">{{item.sort}}</span>
            <span style="width:40px;display: inline-block;" *ngIf="item.status == 1">显示</span>
            <span style="width:40px;display: inline-block;" *ngIf="item.status == 0">不显示</span>
            <span style="width:40px;display: inline-block;" *ngIf="item.status == -1">已删除</span>
            <span
              style="margin-left:10px;width:45px;height:45px;padding:3px;border:1px solid #ccc;display: inline-block;text-align: center;line-height: 45px;"
              *ngIf="!item['pic']">无图</span>
            <img style="margin-left:10px;width:45px;height:45px;padding:3px;border:1px solid #ccc;" *ngIf="item['pic']"
                 src="{{ item['pic'] }}" alt="">
            <span class="pull-right" style="position:absolute;top:50%;right:20px;transform:translateY(-50%);">
            <i class="iconfont icon-edit" *ngIf="canVisit1"
               (click)="editCategory(item.category_name,item.id,item.level,item.parent_id,item.pic,item.sort,item.status)"></i>
            <i class="iconfont icon-remove" *ngIf="canVisit2" (click)="delCategory($event,item.level,item.id)"></i>
          </span>
          </li>
        </ul>
      </nz-spin>
    </div>
    <i class="iconfont icon-right"></i>
  </div>
  <div class="col-md-4 position-r">
    <div class="group-title" *ngIf="canVisit">
      <div>
        <span>二级分类：</span>
        <input type="text" class="form-control" [(ngModel)]="addSecName">
      </div>
      <div style="margin-top:10px;overflow: hidden;">
        <span>分类排序：</span>
        <input type="text" class="form-control" [(ngModel)]="addSecSort">
      </div>
      <div style="margin-top:10px;overflow: hidden;">
        <span>分类显示：</span>
        <select class="form-control" [(ngModel)]="addSecStatus">
          <option value="1">显示</option>
          <option value="0">不显示</option>
        </select>
      </div>
      <div style="margin-top:20px;overflow: hidden;">
        <span style="float:left;">分类图片：</span>
        <app-upload style="float:left;margin-left:5px;" [(fileList)]="fileList2" [(piclist)]="picList2" [outWidth]="100"
                    [outHeight]="100"
                    (piclistChange)="fileChange2()" (fileListChange)="fileChange2()">
        </app-upload>
      </div>
      <button class="btn btn-default admin-style" nz-button (click)="addCategory($event,2)" [nzLoading]="secAddStatus">
        {{ secAddStatus ? '添加分类中' : '添加分类' }}
      </button>
    </div>
    <div class="group-item">
      <nz-spin class="admin-style" [nzTip]="'正在读取二级分类...'" style="height:100%;" [nzSpinning]="secLoading">
        <ul class="list-unstyled">
          <li style="display:flex;align-items:center;position:relative;" *ngFor="let item of secLevel"
              [ngClass]="{'active': secId === item.id}"
              (click)="chosedCategory(2,item.id)">
            <span style="width:70px;display: inline-block;">{{item.category_name}}</span>
            <span style="width:30px;display: inline-block;">{{item.sort}}</span>
            <span style="width:40px;display: inline-block;" *ngIf="item.status == 1">显示</span>
            <span style="width:40px;display: inline-block;" *ngIf="item.status == 0">不显示</span>
            <span style="width:40px;display: inline-block;" *ngIf="item.status == -1">已删除</span>
            <span
              style="margin-left:10px;width:45px;height:45px;padding:3px;border:1px solid #ccc;display: inline-block;text-align: center;line-height: 45px;"
              *ngIf="!item['pic']">无图</span>
            <img style="margin-left:10px;width:45px;height:45px;padding:3px;border:1px solid #ccc;" *ngIf="item['pic']"
                 src="{{ item['pic'] }}" alt="">
            <span class="pull-right" style="position:absolute;top:50%;right:20px;transform:translateY(-50%);">
            <i class="iconfont icon-edit" *ngIf="canVisit1"
               (click)="editCategory(item.category_name,item.id,item.level,item.parent_id,item.pic,item.sort,item.status)"></i>
            <i class="iconfont icon-remove" *ngIf="canVisit2" (click)="delCategory($event,item.level,item.id)"></i>
          </span>
          </li>
        </ul>
      </nz-spin>
    </div>
    <i class="iconfont icon-right"></i>
  </div>
  <div class="col-md-4">
    <div class="group-title" *ngIf="canVisit">
      <div>
        <span>三级分类：</span>
        <input type="text" class="form-control" [(ngModel)]="addThirdName">
      </div>
      <div style="margin-top:10px;overflow: hidden;">
        <span>分类排序：</span>
        <input type="text" class="form-control" [(ngModel)]="addThirdSort">
      </div>
      <div style="margin-top:10px;overflow: hidden;">
        <span>分类显示：</span>
        <select class="form-control" [(ngModel)]="addThirdStatus">
          <option value="1">显示</option>
          <option value="0">不显示</option>
        </select>
      </div>
      <div style="margin-top:20px;overflow: hidden;">
        <span style="float:left;">分类图片：</span>
        <app-upload style="float:left;margin-left:5px;" [(fileList)]="fileList3" [(piclist)]="picList3" [outWidth]="100"
                    [outHeight]="100"
                    (piclistChange)="fileChange3()" (fileListChange)="fileChange3()">
        </app-upload>
      </div>
      <button class="btn btn-default admin-style" nz-button (click)="addCategory($event,3)"
              [nzLoading]="thirdAddStatus">{{ thirdAddStatus ? '添加分类中' : '添加分类' }}
      </button>
    </div>
    <div class="group-item">
      <nz-spin class="admin-style" [nzTip]="'正在读取三级分类...'" style="height:100%;" [nzSpinning]="thirdLoading">
        <ul class="list-unstyled">
          <li style="display:flex;align-items:center;position:relative;" *ngFor="let item of thirdLevel"
              [ngClass]="{'active': thirdId === item.id}"
              (click)="chosedCategory(3,item.id)">
            <span style="width:70px;display: inline-block;">{{item.category_name}}</span>
            <span style="width:30px;display: inline-block;">{{item.sort}}</span>
            <span style="width:40px;display: inline-block;" *ngIf="item.status == 1">显示</span>
            <span style="width:40px;display: inline-block;" *ngIf="item.status == 0">不显示</span>
            <span style="width:40px;display: inline-block;" *ngIf="item.status == -1">已删除</span>
            <span
              style="margin-left:10px;width:45px;height:45px;padding:3px;border:1px solid #ccc;display: inline-block;text-align: center;line-height: 45px;"
              *ngIf="!item['pic']">无图</span>
            <img style="margin-left:10px;width:45px;height:45px;padding:3px;border:1px solid #ccc;" *ngIf="item['pic']"
                 src="{{ item['pic'] }}" alt="">
            <span class="pull-right" style="position:absolute;top:50%;right:20px;transform:translateY(-50%);">
            <i class="iconfont icon-edit" *ngIf="canVisit1"
               (click)="editCategory(item.category_name,item.id,item.level,item.parent_id,item.pic,item.sort,item.status)"></i>
            <i class="iconfont icon-remove" *ngIf="canVisit2" (click)="delCategory($event,item.level,item.id)"></i>
          </span>
          </li>
        </ul>
      </nz-spin>
    </div>
  </div>
</div>

<!--修改弹窗-->
<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row">
          <label class="col-md-2">分类名称:</label>
          <div class="col-md-10">
            <input type="text" class="form-control" [(ngModel)]="editName">
          </div>
        </div>
        <div class="row">
          <label class="col-md-2">分类排序:</label>
          <div class="col-md-10">
            <input type="text" class="form-control" [(ngModel)]="editSort">
          </div>
        </div>
        <div class="row">
          <label class="col-md-2">分类状态:</label>
          <div class="col-md-10">
            <select class="form-control" name="" id="" [(ngModel)]="editStatus">
              <option value="1">显示</option>
              <option value="0">不显示</option>
            </select>
          </div>
        </div>
        <div class="row">
          <label class="col-md-2">分类图片:</label>
          <div class="col-md-10">
            <app-upload [(fileList)]="fileList4" [(piclist)]="picList4"
                        (piclistChange)="fileChange4()" (fileListChange)="fileChange4()" [canChange]="canChange">
            </app-upload>
          </div>
        </div>
        <div class="text-center" style="margin-top:20px;">
          <button class="btn btn-default btn-md-long" type="button" (click)="closeModal()">取消</button>
          <button class="btn btn-success btn-md-long" type="submit" (click)="editSubmit()">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 是否确认删除弹框  属性名 -->
<div class="modal fade" bsModal #delModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="delModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        是否确认删除
      </div>
      <div class="modal-footer mt20">
        <button class="btn btn-default btn-md-long" type="button" (click)="delModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="submit" (click)="doDelCateory()">确定</button>
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow"
                  (promptIsShow)="promptIsShow($event)"></app-notification>
